import { useEffect, useMemo, useState } from 'react'
import useWidget from '@/hooks/useWidget'
import useStyle from './useStyle'
import Global from '../Global'
import Dataset from '../Dataset'
import Style from '../Style'
import Advance from '../Advance'

function useConfigs() {
  const { selectedWidgetIds } = useWidget()
  const [styleConfigs, styleData, onStyleChange] = useStyle()

  const [activeKey, setActiveKey] = useState()

  const chartConfigs = useMemo(
    () => [
      { label: '数据', value: 'dataset', element: Dataset },
      {
        label: '样式',
        value: 'style',
        element: Style,
        configs: styleConfigs,
        data: styleData,
        onChange: onStyleChange
      },
      { label: '高级', value: 'advance', element: Advance }
    ],
    [styleConfigs, styleData, onStyleChange]
  )

  const globalConfigs = [{ label: '全局设置', value: 'global', element: Global }]

  const configs = useMemo(
    () => (selectedWidgetIds.length ? chartConfigs : globalConfigs),
    [selectedWidgetIds, chartConfigs]
  )

  useEffect(() => {
    setActiveKey(configs[0]?.value)
  }, [selectedWidgetIds])

  return { activeKey, setActiveKey, configs }
}

export default useConfigs
